<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
    v-loading="isLoading">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.strategyName" prop="strategyName">
          <el-input :maxlength="30" :show-word-limit="true" v-model="formInline.strategyName" clearable
            :placeholder="prompt?.strategyName" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.status" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio v-for="item in STRATEGYSTATUS" :key="item.value" :value="item.value" :label="item.label">
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.alarmLevel" prop="alarmLevel">
          <el-checkbox-group v-model="formInline.alarmLevel">
            <el-checkbox v-for="item in EVENTLEVEL" :key="item.value" :value="item.value" :label="item.label">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.alarmType" prop="alarmType">
          <el-checkbox-group v-model="formInline.alarmType">
            <el-checkbox v-for="item in ALARMTYPE" :key="item.value" :value="item.value" :label="item.label">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.noticeType" prop="noticeType">
          <el-checkbox-group v-model="formInline.noticeType">
            <el-checkbox v-for="item in NOTICE_TYPE" :key="item.value" :value="item.value" :label="item.label">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.pushInterval" prop="pushInterval">
          <div class="flex items-center gap-[16px]">
            <el-input v-model="formInline.pushInterval" clearable placeholder="请输入" type="number" :min="60">
              <template #append>秒</template>
            </el-input>
            <span class="whitespace-nowrap text-[#ccc]">告警确认后停止推送</span>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.pushMaxTimes" prop="pushMaxTimes">
          <el-input-number v-model="formInline.pushMaxTimes" clearable :placeholder="prompt?.pushMaxTimes" type="number"
            :min="1" :max="3" style="width: 240px;">
          </el-input-number>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item :label="titles?.pushTimeStart" prop="pushTimeStart">
          <div class="flex items-center gap-[16px]">
            <el-time-select v-model="formInline.pushTimeStart" :max-time="formInline?.pushTimeEnd" style="width: 140px"
              placeholder="示例: 00:00" start="00:00" step="00:10" end="24:00" />
            <el-time-select v-model="formInline.pushTimeEnd" style="width: 140px" :min-time="formInline.pushTimeStart"
              placeholder="请选择" start="00:00" step="00:10" end="24:00" />
            <span class="whitespace-nowrap text-[#ccc]">只在该时间段推送告警消息</span>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item :label="titles?.pushTimeWeek" prop="pushTimeWeek">
          <el-checkbox-group v-model="formInline.pushTimeWeek">
            <el-checkbox v-for="item in SELECT_DAY" :key="item.value" :value="item.value" :label="item.label">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import {
  STRATEGYSTATUS,
  EVENTLEVEL,
  ALARMTYPE,
  NOTICE_TYPE,
  SELECT_DAY
} from "@/constant/alarm-mangenment";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
type FormProps = {
  formInline: any;
  isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as any,
  isLoading: false
});

const formRules = reactive(<FormRules>{
  strategyName: [{ required: true, message: prompt.strategyName, trigger: "change" }],
  strategyStatus: [{ required: true, message: prompt.strategyStatus, trigger: "change" }],
  alarmType: [{ required: true, message: prompt.alarmType, trigger: "change" }],
  noticeType: [{ required: true, message: prompt.noticeType, trigger: "change" }],
  status: [{ required: true, message: prompt.status, trigger: "change" }],
  alarmLevel: [{ required: true, message: prompt.alarmLevel, trigger: "change" }],
  pushInterval: [{ required: true, message: prompt.pushInterval, trigger: "change" },
  { pattern: /^(6[0-9]|[7-9][0-9]|[1-9][0-9]{2,})$/, message: "推送间隔最低60秒", trigger: "change" }],
  pushTimeStart: [{ required: true, message: prompt.pushTimeStart, trigger: "change" }],
  pushTimeWeek: [{ required: true, message: prompt.pushTimeWeek, trigger: "change" }],
  pushMaxTimes: [{ required: true, message: prompt.pushMaxTimes, trigger: "change" }],
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
